<template>
  <div class="resolution-switch-map">
    <div id="resolution-switch-map" class="map-container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, nextTick } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';

let map: Map | null = null;
let layer1: TileLayer<XYZ> | null = null;
let layer2: TileLayer<XYZ> | null = null;

onMounted(() => {
  nextTick(() => {
    layer1 = new TileLayer({
      source: new XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
      }),
      minResolution: 0,
      maxResolution: 76.43702828517625, // zoom=10
      opacity: 1,
      zIndex: 1,
    });

    layer2 = new TileLayer({
      source: new XYZ({
        url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}',
      }),
      minResolution: 76.43702828517625, // zoom=10
      maxResolution: Infinity,
      opacity: 1,
      zIndex: 2,
    });

    map = new Map({
      target: 'resolution-switch-map',
      layers: [layer2, layer1],
      view: new View({
        center: fromLonLat([114.30, 30.50]),
        zoom: 10,
        projection: 'EPSG:3857',
        minZoom: 3,
        maxZoom: 18,
      }),
    });
  });
});

onUnmounted(() => {
  if (map) {
    map.setTarget(undefined);
    map = null;
  }
});
</script>

<style scoped>
.resolution-switch-map, .map-container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
}
</style> 